<template>
  <div>
    <el-form :inline="true" :model="formData">
      <el-row>
        <el-col :span="10">
          <el-form-item label="分析品类:">
            <el-radio-group v-model="formData.superCategoryCode">
              <el-radio
                v-for="item in zoneList"
                :key="item.dictCode"
                :label="item.dictCode"
              >{{ item.dictName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="查询组织/门店:">
            <el-select
              v-model="formData.shopCode"
              style="width:180%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in shopList"
                :key="item.shopCode"
                :label="item.shopName"
                :value="item.shopCode"
              />
            </el-select>
            <!-- <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button> -->

          </el-form-item>
        </el-col>

        <!-- <el-form-item label="系列:">
        <el-select
          v-model="formData.series"
          placeholder="请选择"
        >
          <el-option
            v-for="item in seriesList"
            :key="item.dictCode"
            :disabled="item.dictCode===formData.firstCategory||item.dictCode===formData.secondCategory"
            :label="item.dictName"
            :value="item.dictCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="一级类别:">
        <el-select
          v-model="formData.firstCategory"
          placeholder="请选择"
        >
          <el-option
            v-for="item in seriesList"
            :key="item.dictCode"
            :disabled="item.dictCode===formData.series||item.dictCode===formData.secondCategory"
            :label="item.dictName"
            :value="item.dictCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级类别:">
        <el-select
          v-model="formData.secondCategory"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in seriesList"
            :key="item.dictCode"
            :disabled="item.dictCode===formData.firstCategory||item.dictCode===formData.series"
            :label="item.dictName"
            :value="item.dictCode"
          />
        </el-select>
      </el-form-item>
        <el-form-item label="取数时间:">
          <el-date-picker
            v-model="formData.month"
            :clearable="false"
            type="monthrange"
            value-format="yyyy-MM"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          />
        </el-form-item> -->
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>
<script>
import { getDictByPatchType } from '@/api/dataDict'
// import { getShopList } from '@/api/display/salesData'
import { monthRange } from '@/utils'
export default {
  name: 'SearchForm',
  props: {
    shopList: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      monthRange,
      formData: { superCategoryCode: '4158', series: 'A', firstCategory: 'B', secondCategory: '',
        shopCode: '', month: ['2022-11', '2023-04'] },
      zoneList: [],
      seriesList: []
    }
  },
  async created() {
    const { DISP_SERIES, ZONE_DIVISION } = await getDictByPatchType(['DISP_SERIES', 'ZONE_DIVISION'])
    this.seriesList = DISP_SERIES
    this.zoneList = ZONE_DIVISION
    // getShopList().then(res => {
    //   if (res.success && res.data.length > 0) {
    //     this.shopList = res.data
    //   } else {
    //     this.$message.warning('当前用户下没有组织/门店')
    //   }
    // })
  },
  methods: {
    onSubmit() {
      const data = {
        filtersRaw: [],
        paramsRaw: {}
      }
      for (const key in this.formData) {
        if (key === 'month') {
          const date = monthRange(this.formData.month[0], this.formData.month[1])
          this.$set(data.paramsRaw, 'month', date.join(','))
        } else {
          Object.defineProperty(data.paramsRaw, key, {
            value: this.formData[key],
            writable: true,
            enumerable: true,
            configurable: true })
        }
      }
      this.$emit('search', data, data.paramsRaw)
    },
    onClear() {
      this.formData.secondCategory = ''
    },
    updateValue(prop, value) {
      this.$set(this.formData, prop, value)
    }
  }
}
</script>
